前端优化清单（一）：之首屏优化

前端性能优化清单：

前端优化项	优化内容	备注
首屏	首屏优化到0.5-2s，前端优化首选。	优化切入口，目标<2s
内容	图片、JS、Script、Flash等元素是页面和应用的主要构成，也是前端优化的重点。	网页元素过多
请求	页面元素的数量、加载文件的多少、大小，决定了页面的加载时间和效率。优化和规避请求。	域名数量和解析
CSS	页面样式，动画的实现，特效的实现，决定页面外在表现和交互效果。	静态页面布局
JavaScript	JS串行加载等特殊性，是影响页面性能的主要原因之一，而且比重大，无论大小、逻辑、数量都需严格控制。	性能杀手
图片	页面中，60%以上的请求和大小都是由图片构成，图片加载决定了页面加载的快与慢。	成本优化

首屏优化原则

首屏（above the fold）：名字来源（报纸）头版，原指报纸折叠之后仍能看见的页面。Web中只网站加载后，用户不用滚动屏幕所看到的所有信息。

---

1. 首屏最小化：
   首屏HTML尽量小，控制DOM节点数、请求数、外链数，可视区域尽快显示。
2. 元素优化
   优化落在首屏内的元素性能和结构，包括基础页、元素请求、图片、JS、是否调用第三方内容、层次机构等。
3. 页面静态化
   首屏页包含了页面基础页时间（第一次请求），以屏内的元素总的DNS解析时间，建立连接时间，SSL握手时间，发出请求时间，重定向时间，内容下载时间等。
4. 基础页优化
   以静态页面的形式存放，用户相关数据依赖Ajax，比如登录信息。用户默认显示未登录状态，异步获取到用户数据后更新。
5. 首屏广告优化
   重点减少广告JS的下载次数，减少状态上报次数，避免iframe。同时处理脚本放在页面底部，修改广告的载入顺序，避免影响页面显示。
6. 首屏按需加载
   隐藏tab页，用了异步加载的方式，只有当用户正在要看这块内容的时候才去拉取。
7. 单独合并素材
   将代发布的源文件进行压缩合并，减少文件数量，授权请求最少原则。
8. 统计代码优化
   针对用户行为统计代码如（CNZZ，百度统计等），进行去除冗余，统一放到首屏后加载。